<template>
  <div class="all">
    <div v-show="!showNav" style="position: sticky;top: 0" class="header">
        <span @click="goBack()" class="fanhui">
          <img src="../../../assets/返回.png" alt="">
          <span class="sides">返回</span>
        </span>
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索关键词"
        left-icon=""
        show-action
        @keyup="onSearch"
      >
        <template #left-icon>
          <div @click="onSearch">
            <van-icon name="search" />
          </div>
        </template>
        <template #action>
<!--          <div style="" @click="onSearch" class="sousuo">搜索</div>-->
        </template>
      </van-search>
      <span></span>
    </div >
    <div class="content">
      <van-tabs
        sticky
        offset-top="12vw"
        v-model="active"
        swipeable
        animated
        color="#1da4f2"
        title-active-color="#1da4f2"
        line-width="15px"
        line-height="2px"
        @click="onClick"
        @change="onchange"
      >
        <van-tab
          v-for="(item, index) in tabList"
          :key="index"
          :title="item.name"
        >
          <van-empty
            style="width: 100%;height: 60%"
            v-show="orderList.length <= 0"
            class="custom-image"
            :image="require('../../../assets/空两本书.png')"
            :description="nullOrderText"
          />
          <div class="box" v-for="(Orditem, Ordindex) in orderList" :key="Ordindex">
<!--            <div class="orderTop">-->
<!--              <a class="typeName" v-show="Orditem.TYPE == 0">康</a>-->
<!--              <a class="typeName" v-show="Orditem.TYPE == 1">护</a>-->
<!--              {{Orditem.ITEM_NAME}}-->
<!--            </div>-->
            <div class="orderTop">
              <span class="orderLeft">
                <a class="typeName" >
                  {{Orditem.TYPE == 3 ? '康' :
                  Orditem.TYPE == 4 ? '护':
                  Orditem.TYPE == 7 ? '生':
                  Orditem.TYPE == 8 ? '养':
                    ''
                  }}

                </a>
              {{Orditem.ITEM_NAME}}
              </span>
              <span class="statusSpan" v-show="(Orditem.STATUS == 2 && Orditem.FINISH == 0 && Orditem.CONFIRM == 0 && Orditem.APPRAISE_STATUS == 0)">已完成</span>
              <span class="statusSpan" v-show="Orditem.STATUS == 4 && Orditem.REFUND == 2">订单已取消,退款中</span>
              <span class="statusSpan" v-show="Orditem.STATUS == 4 && Orditem.REFUND == 3">订单已取消,退款成功</span>
              <span class="statusSpan" v-show="Orditem.STATUS == 4 && Orditem.REFUND == 4">订单已取消,退款失败</span>
              <span class="statusSpan" v-show="Orditem.STATUS == 3 || Orditem.STATUS == 5">订单已取消</span>

              <span class="statusSpan" v-show="Orditem.STATUS == 1">待支付</span>
              <span class="statusSpan" v-show="Orditem.STATUS == 2 && Orditem.CONFIRM == 1">待接单</span>
              <span class="statusSpan" v-show="Orditem.STATUS == 2 &&  Orditem.FINISH == 1 && Orditem.CONFIRM == 0">待服务</span>
              <span class="statusSpan" v-show="Orditem.STATUS == 2 &&  Orditem.FINISH == 0 && Orditem.CONFIRM == 0 && Orditem.APPRAISE_STATUS == 1">待评价</span>

            </div>
            <ul class="orderUl" >
              <li v-for="(item, index) in ulList" :key="index">
                <img :src="item.img" class="tubiao" alt="">
                <span v-if="Orditem.STATUS == 1 || (Orditem.STATUS == 2 && Orditem.CONFIRM == 1)">{{item.name1}}</span>
                <span v-else>{{item.name}}</span>
                <span :style="[item.forName === 'REAL_AMOUNT' ? {'color': '#E3170D'} : '']"><span v-show="item.forName === 'REAL_AMOUNT'">￥</span> {{Orditem[item.forName]}}</span>
              </li>
            </ul>
            <div class="orderBottom">
              <button v-show="Orditem.STATUS == 1"
                      @click="pay(Orditem, Orditem.ORDER_ID, Orditem.ITEM_ID, Orditem.TYPE)">立即支付</button>
              <button v-show="Orditem.STATUS == 1 || (Orditem.STATUS == 2 && Orditem.CONFIRM == 1)"
                      @click="cancelReser(Orditem.ORDER_ID)">取消预约</button>
              <button v-show="(Orditem.STATUS == 2 && Orditem.FINISH == 1 && Orditem.CONFIRM == 0)"
                      @click="confirmComple(Orditem.ORDER_ID)"
              >确认服务</button>
              <button v-show="(Orditem.STATUS == 2 && Orditem.FINISH == 0 && Orditem.APPRAISE_STATUS == 1)">未评价</button>
<!--              <button v-show="(Orditem.STATUS == 2 && Orditem.FINISH == 0 && Orditem.CONFIRM == 0 && Orditem.APPRAISE_STATUS == 0)">已完成</button>-->
<!--              <div class="statusDiv" v-show="Orditem.STATUS == 4 && Orditem.REFUND == 2">取消预约,退款中</div>-->
<!--              <div class="statusDiv" v-show="Orditem.STATUS == 4 && Orditem.REFUND == 3">取消预约,退款成功</div>-->
<!--              <div class="statusDiv" v-show="Orditem.STATUS == 3 || Orditem.STATUS == 5">预约已取消</div>-->
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <van-dialog v-model="cancelShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认取消预约吗？"
                  @confirm="cancelConfirm()"
                  show-cancel-button>
      </van-dialog>
      <van-dialog v-model="confirmShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="您确认已完成服务了吗？"
                  @confirm="yesConfirm()"
                  show-cancel-button>
      </van-dialog>
      <van-dialog v-model="payShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="是否确认继续支付？"
                  @confirm="payConfirm()"
                  show-cancel-button>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import HTTP from '../../../http/video.http'
import {Toast} from "vant";
export default {
  name: 'Order',
  data () {
    return {
      searchValue: '',
      active: 0,
      tabList: [
        {
          name: '全部',
          type: 0
        },
        {
          name: '待支付',
          type: 1
        },
        {
          name: '待接单',
          type: 2
        },
        {
          name: '待服务',
          type: 3
        },
        {
          name: '待评价',
          type: 4
        },
        {
          name: '已完成',
          type: 5
        },
        {
          name: '已取消',
          type: 6
        }
      ],
      ulList: [
        {
          name: '被服务人：',
          name1: '被服务人：',
          img: require('../../../assets/被服务人员@2x.png'),
          forName: 'PATIENT_NAME'
        },
        {
          name: '预约服务日期：',
          name1: '预约服务日期：',
          img: require('../../../assets/预约时间@2x.png'),
          forName: 'DATE'
        },
        {
          name: '预约服务时间：',
          name1: '预约服务时间：',
          img: require('../../../assets/预约时间@2x.png'),
          forName: 'TIME'
        },
        {
          name: '服务地址：',
          name1: '服务地址：',
          img: require('../../../assets/服务地址@2x.png'),
          forName: 'ADDRESS'
        },
        {
          name: '项目金额：',
          name1: '项目金额：',
          img: require('../../../assets/项目金额@2x.png'),
          forName: 'REAL_AMOUNT'
        },
        {
          name: '预约服务人员：',
          name1: '服务人员：',
          img: require('../../../assets/被服务人员@2x.png'),
          forName: 'STAFF_NAME'
        },
        {
          name: '预约人员：',
          name1: '操作人员：',
          img: require('../../../assets/被服务人员@2x.png'),
          forName: 'USER_NAME'
        },
        {
          name: '操作时间：',
          name1: '操作时间：',
          img: require('../../../assets/预约时间@2x.png'),
          forName: 'ORDER_TIME'
        }
      ],
      orderList: [],
      cancelShow: false,
      orderID: '',
      confirmShow: false,
      payShow: false,
      itemID: '',
      nullOrderText: '',
      ITEM: ''
    }
  },
  computed: {
    showNav () {
      return this.$route.query.showNav
    },
    searchVal () {
      return this.$route.query.searchVal
    },
    type () {
      let type = Number(this.$route.query.type)
      let title = ''
      if (type == 3) {
        title = '居家康复'
      } else if (type == 4) {
        title = '居家护理'
      } else if (type == 7) {
        title = '居家生活'
      } else if (type == 8) {
        title = '居家养老'
      }
      document.title = title
      return Number(this.$route.query.type)
    },
    typeTitle () {
      return function (type) {
        let title = ''
        if (type == 3) {
          title = '居家康复'
        } else if (type == 4) {
          title = '居家护理'
        } else if (type == 7) {
          title = '居家生活'
        } else if (type == 8) {
          title = '居家养老'
        }
        document.title = title
        return title
      }
    },
    // 不显示
    typeLabel: function () {
      if (this.type !== 5) {
        return '咨询'
      } else {
        this.$set(this.tabList1[3], 'name', '会诊中')
        return '会诊'
      }
    }
  },
  watch: {
    type (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getOrder()
      }
    },
    searchVal (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getOrder()
      }
    }
  },
  mounted () {
    if (this.type) {
      this.type = Number(sessionStorage.getItem('order_item_type'))
    }
    if (this.$route.query.MARK === undefined || this.$route.query.MARK === null || this.$route.query.MARK === '') {
    } else {
      this.active = Number(this.$route.query.MARK)
      console.log(this.active)
    }
    this.getOrder()
  },
  methods: {
    pay (item, orderID, itemID, type) {
      this.ITEM = item
      this.orderID = orderID
      this.itemID = itemID
      this.type = type
      this.payShow = true
    },
    payConfirm () {
      this.$http.miniorder_pay({ORDER_ID: this.orderID, amount: this.ITEM.PRICE})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            window.WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                'appId': res.data.data.appId, // 公众号名称，由商户传入
                'timeStamp': res.data.data.timestamp, // 时间戳，自1970年以来的秒数
                'nonceStr': res.data.data.nonceStr, // 随机串
                'package': res.data.data.packageValue,
                'signType': res.data.data.signType, // 微信签名方式：
                'paySign': res.data.data.paySign // 微信签名
              },
              function (res) {
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  Toast('支付成功')
                  this.getOrder()
                } else {
                  Toast('支付失败')
                }
              })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
      // eslint-disable-next-line eqeqeq
      // if (this.type == 0) {
      //   location.href = HTTP.zhaoPinHttp + '/jjkf/itemdetail.do?ITEM_ID=' + this.itemID + '&ORDER_ID=' + this.orderID
      //   // eslint-disable-next-line eqeqeq
      // } else if (this.type == 1) {
      //   location.href = HTTP.zhaoPinHttp + '/jjhl/itemdetail.do?ITEM_ID=' + this.itemID + '&ORDER_ID=' + this.orderID
      // }
    },
    // 确认完成 按钮
    confirmComple (orderID) {
      this.orderID = orderID
      this.confirmShow = true
    },
    // 确认完成 接口
    yesConfirm () {
      this.$http.finishorder({ORDER_ID: this.orderID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getOrder()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 取消预约 按钮
    cancelReser (orderID) {
      this.orderID = orderID
      this.cancelShow = true
    },
    // 取消预约 接口
    cancelConfirm () {
      this.$http.cancelorder({ORDER_ID: this.orderID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getOrder()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取各个状态下的订单
    getOrder () {
      let val = ''
      if (this.searchVal) {
        val = this.searchVal
      } else {
        val = this.searchValue
      }
      this.$http.getorders({'KEY': val, 'MARK': this.active, TYPE: this.type})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.orderList = res.data.data
            if (Number(this.active) === 0) {
              this.nullOrderText = '暂无任何订单哦'
            } else if (Number(this.active) === 1) {
              this.nullOrderText = '暂无待支付订单哦'
            } else if (Number(this.active) === 2) {
              this.nullOrderText = '暂无待接单订单哦'
            } else if (Number(this.active) === 3) {
              this.nullOrderText = '暂无待服务订单哦'
            } else if (Number(this.active) === 4) {
              this.nullOrderText = '暂无待评价订单哦'
            } else if (Number(this.active) === 5) {
              this.nullOrderText = '暂无已完成订单哦'
            } else if (Number(this.active) === 6) {
              this.nullOrderText = '暂无已取消订单哦'
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 头部搜索
    onSearch () {
      this.getOrder()
    },
    // 返回
    goBack () {
      this.$router.history.go(-2)
    },
    // 订单点击
    onClick () {
      // this.getOrder()
    },
    // 订单滑动切换
    onchange () {
      this.getOrder()
    }
  }
}
</script>

<style scoped>
  /deep/ .van-search{
    width: 80%;
  }
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    font-family: PingFang SC;
    overflow: auto;
  }
  .header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 999;
    /*border-bottom: 1px solid #E5E5E5;*/
    overflow: hidden;
  }
  .fanhui{
    display: flex;
    align-items: center;
    margin-left: 15px;
    color: #1da4f2;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  .sides{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /*/deep/ .van-field__control{*/
  /*  font-size: 15px;*/
  /*  font-family: PingFang SC;*/
  /*  font-weight: bold;*/
  /*}*/
  /*/deep/ .van-ellipsis{*/
  /*  font-size: 15px;*/
  /*  font-family: PingFang SC;*/
  /*  font-weight: bold;*/
  /*}*/
  .sousuo{
    margin-left: 10px;
    color: #1DA4F2;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .box{
    width: 95%;
    margin: 10px auto;
    background: white;
    border-radius: 10px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .orderTop{
    height: 60px;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .orderLeft{
    display: flex;
    align-items: center;
  }
  .statusSpan{
    color: #1DA4F2;
    display: flex;
    font-weight: 500 !important;
  }
  .orderUl{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  .orderUl li{
    display: flex;
    align-items: center;
    height: 30px;
  }
  .typeName{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #1DA4F2;
    border-radius: 50%;
    margin-right: 8px;
  }
  .tubiao{
    width: 15px;
    height: 15px;
    margin-right: 8px;
  }
  .orderBottom{
    height: 44px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  .orderBottom button{
    width: 90px;
    height: 29px;
    border: 1px solid #E3170D;
    border-radius: 14px;
    background: transparent;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #E3170D;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .statusDiv{
    width: 92%;
    height: 29px;
    background: #FAF9FE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    margin: 0 auto;
  }
</style>
